<template>
    <div id="base-container">
        <div class="base-title base-title-back">
            <div class="base-title-text">
                查询表格
                <el-tooltip>
                    <el-icon>
                        <Position />
                    </el-icon>
                    <template #content>
                        设备名称：{{ deviceProperty?.name }} 设备标识：{{ deviceProperty?.code }}
                    </template>>
                </el-tooltip>
            </div>
            <el-button :icon="Back" type="primary" @click="$router.back()">返回</el-button>
        </div>
        <div class="base-search">
            <SearchIndex :model-prop="searchParam" :model-form="searchTopEleForm" @enter-search="fetchTableData"
                @enter-delete="fetchTableData" />
        </div>
        <div class="base-menu">
            <el-button type="primary" @click="beforeAdd">添加调节器</el-button>
        </div>
        <div class="base-table">
            <el-table :data='tableData' border>
                <el-table-column align="center" type='selection'></el-table-column>
                <el-table-column prop="id" align="center" min-width="200" label="ID"></el-table-column>
                <el-table-column prop="name" align="center" min-width="200" label="设备名称"></el-table-column>
                <el-table-column prop="biggestBitRate" align="center" min-width="200" label="最大比特速率"></el-table-column>
                <el-table-column prop="smallestBitRate" align="center" min-width="200" label="最小比特速率"></el-table-column>
                <el-table-column prop="ip" align="center" min-width="200" label="IP"></el-table-column>
                <el-table-column align="center" width="180" label="操作" fixed="right">
                    <template #default="{ row }">
                        <div class="menu-flex">
                            <span @click="handleDelete(row)">删除</span>
                            <span @click="beforeUpdate(row)">更新</span>
                            <span @click="beforeCopy(row)">复制</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog v-model="dialogShow" :title="dialogTitle + '融为调节器'" width="500px">
        <DialogForm :ref="(e) => dialogForm = e" :model-form="DialogEleForm" :model-prop="dialogParam" />
        <template #footer>
            <el-button type="info" @click="dialogShow = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Api from "@/api/resourceManagement/waste/34XBandDualChannelOpticalTransmittersManagement"
import { pageaikoteS70mManage, pageMediatorSpeedManage } from '@/api/resourceManagement/type';
import SearchIndex from '@/components/formEncapsulation/searchIndex.vue';
import { DialogEleForm, searchTopEleForm } from '../../resourceFormEle/integratedIntoHighSpeedDemodulationChannelManagement';
import { paramsSendAxios } from '@/utils/dataFormatSpecification';
import DialogForm from '@/components/formEncapsulation/dialogForm.vue';
import { useRoute } from 'vue-router';
import { Back, Position } from '@element-plus/icons-vue';
import { nextTick } from 'vue';
import { submitFormRules } from "@/utils/elementC"
/**
 * @name 资源管理-融为高速解调通道管理
 * ---------------
 */

/**
 * @description 获取页面传递参数
 */
const route = useRoute()

/**
 * @description 获取业务数据
 */
interface deviceTypeInterface {
    code: string
    name: string
}
const tableData = ref<pageaikoteS70mManage[]>([])
const deviceProperty = ref<deviceTypeInterface>()
onMounted(() => {
    deviceProperty.value = { code: route.query.code as string, name: route.query.name as string }
    fetchTableData()
})
const searchParam = ref({
    deviceGlobalIndex: { like: false, value: "" },
    demodulatorIdx: { like: false, value: "" },
    lightTransmitterIdx: { like: false, value: "" },
    deviceType: { like: false, value: "" },
    id: { like: false, value: "" },
    name: { like: true, value: "" },
    biggestBitRate: { like: false, value: "" },
    smallestBitRate: { like: false, value: "" },
    ip: { like: false, value: "" },
})
const fetchTableData = async () => {
    searchParam.value.lightTransmitterIdx.value = route.query.id as string
    const { response } = await Api.get(paramsSendAxios('get', searchParam.value))
    tableData.value = response
}


/**
 * @description 表格操作-新增
 */
const dialogParam = ref<pageMediatorSpeedManage>({
    deviceGlobalIndex: "",
    demodulatorIdx: "",
    deviceType: "",
    id: "",
    name: "",
    biggestBitRate: "",
    smallestBitRate: "",
    ip: "",
})
const dialogShow = ref(false)
const dialogTitle = ref('新增')
/**
 * @description 表格操作-删除
 */
const handleDelete = async (row: pageMediatorSpeedManage) => {
    dialogParam.value = row
    await Api.delete(paramsSendAxios('delete', dialogParam.value))
    fetchTableData()
}

/**
 * @description 表格操作-新增
 */
const dialogForm = ref()
const beforeAdd = () => {
    nextTick(() => {
        dialogForm.value?.formRef.resetFields()
        dialogTitle.value = '新增'
        dialogShow.value = true
    })
}
/**
 * @description 表格操作-更新
 */
const oldRowData = ref<pageMediatorSpeedManage>({
    deviceGlobalIndex: "",
    demodulatorIdx: "",
    deviceType: "",
    id: "",
    name: "",
    biggestBitRate: "",
    smallestBitRate: "",
    ip: "",
})
const beforeUpdate = async (row: pageMediatorSpeedManage) => {
    oldRowData.value = JSON.parse(JSON.stringify(row))
    dialogShow.value = true
    dialogParam.value = JSON.parse(JSON.stringify(row))
    dialogTitle.value = '更新'
}
/**
 * @description 表格操作-复制
 */
const beforeCopy = (row: pageMediatorSpeedManage) => {
    oldRowData.value = JSON.parse(JSON.stringify(row))
    dialogShow.value = true
    dialogParam.value = JSON.parse(JSON.stringify(row))
    dialogTitle.value = '复制'
}

const handleSubmit = async () => {
    if (!await submitFormRules(dialogForm.value.formRef)) return
    if (dialogTitle.value == '新增') {
        dialogParam.value.demodulatorIdx = route.query.id as string
        dialogParam.value.deviceGlobalIndex = ""
        const res = await Api.add(paramsSendAxios('add', dialogParam.value))
        dialogShow.value = res ? false : true

        fetchTableData()
    } else if (dialogTitle.value == '更新') {
        const res = await Api.update(paramsSendAxios('update', dialogParam.value, oldRowData.value))
        dialogShow.value = res ? false : true
        fetchTableData()
    } else if (dialogTitle.value == '复制') {
        // 复制
        let copyParam = { name: oldRowData.value.name }
        const res = await Api.copy(paramsSendAxios('copy', dialogParam.value, copyParam))
        dialogShow.value = res ? false : true
        fetchTableData()
    }
}
</script>

<style scoped></style>